<template>
  <div>
    <mt-header title="微商城分销后台">
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="sowing">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537610740092&di=21a455e6a0218148901585a75b41dd0e&imgtype=0&src=http%3A%2F%2Fwww.isto.net.cn%2FUploads%2F201703%2F58c5f4c58da95.jpg" height="100%">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537610876917&di=b70579929834b672e4041d681de163eb&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01da285711ee166ac72513433e886f.jpg%401280w_1l_2o_100sh.jpg" height="100%">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537610898924&di=7650b32f7aaa32b4d1c75b37fdf87b59&imgtype=0&src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fallimg%2F140125%2F263915-140125144T7.jpg" height="100%">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="grid">
      <ul>
        <li>
          <router-link :to="{name: 'userList'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-kehu"></i></p>
              <p>我的客户</p>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name: 'qrCode'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-qr_code"></i></p>
              <p>我的二维码</p>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name: 'setting'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-shezhi"></i></p>
              <p>设置</p>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name: 'order'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-dingdan"></i></p>
              <p>订单</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {}
  },
  methods: {},
  created () {}
}
</script>

<style scoped>
  .grid{
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    box-sizing: border-box;
  }
  .grid li{
    width: 33.33333%;
    float: left;
    height: 100px;
    list-style: none;
    border-right: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    box-sizing: border-box;
    text-align: center;
    position: relative;
  }
  .icon_p{
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -21px;
  }
  .grid li a{
    text-decoration: none;
  }
  .grid li p{
    font-size: 12px;
    color: #80848f;
  }
  .grid li p i{
    font-size: 24px;
  }
  .sowing{
    height: 210px;
  }
  .sowing img{
    width: 100%;
  }
</style>
